<template>
  <div class="container mx-auto px-4 py-16 text-center">
    <div class="max-w-md mx-auto">
      <div class="bg-green-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6">
        <i class="fa fa-check text-3xl text-green-500"></i>
      </div>
      <h1 class="text-3xl font-bold mb-4">订单提交成功</h1>
      <p class="text-gray-600 mb-8">感谢您的购买！您的订单已成功提交，我们将尽快为您发货。</p>
      <div class="bg-white rounded-lg shadow-sm p-6 mb-8">
        <h3 class="font-medium text-gray-900 mb-4">订单信息</h3>
        <div class="space-y-2 text-left">
          <div class="flex justify-between">
            <span class="text-gray-600">订单编号</span>
            <span class="font-medium">{{ orderNumber }}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600">订单日期</span>
            <span>{{ orderDate }}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600">订单总价</span>
            <span class="font-medium">¥{{ orderTotal }}</span>
          </div>
        </div>
      </div>
      <div class="flex flex-col sm:flex-row gap-4">
        <router-link 
          to="/" 
          class="flex-1 py-3 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
        >
          继续购物
        </router-link>
        <router-link 
          to="/user/orders" 
          class="flex-1 py-3 bg-primary hover:bg-primary/90 text-white rounded-md transition-colors"
        >
          查看订单
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const router = useRouter()
const store = useStore()

const orderNumber = computed(() => 'ORD-' + Math.floor(Math.random() * 1000000).toString().padStart(6, '0'))
const orderDate = computed(() => new Date().toLocaleDateString())
const orderTotal = computed(() => store.getters.cartTotal.toFixed(2))

onMounted(() => {
  if (!store.getters.lastOrderDate) {
    router.push('/')
  }
})
</script>    